<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#selectBtn").click(function () {
                $("#imgDiv").show("slower");
            })

            $("#imgDiv img").click(function () {
                // $("#faceImg").attr("src",$(this).attr("src"));
                $("#faceImg").prop("src",this.src);
                $("#imgDiv").hide("fast");
            })
        })
    </script>
</head>
<body>
    <img src="../img/1.jpg" width="40" height="40" id="faceImg"><br>
    <input type="button" value="选择头像" id="selectBtn"><br>
    <div id="imgDiv" style="display: none">
        <img src="../img/1.jpg">
        <img src="../img/2.jpg">
        <img src="../img/9.jpg">
        <img src="../img/10.jpg">
    </div>
</body>
</html>